<template>
    <div class="orderContent">
        <van-tabs v-model="active" @click="handleTab">
            <van-tab title="全部订单"></van-tab>
            <van-tab title="待评价"></van-tab>
        </van-tabs>
        <div class="content" v-if="orderList.length > 0">
            <div class="orderItem" v-for="(item, index) in orderList" :key="index" @click="handleOrder(item)">
                <div class="top">
                    <div class="img">
                        <img src="@/assets/img/dingcan/foodImg.png" alt="">
                    </div>
                    <div class="infos">
                        <div class="name">{{ item.name }}</div>
                        <div class="status">已完成</div>
                    </div>
                </div>
                <div class="middle">
                    <div class="foods">
                        <div class="food" v-for="(food, _index) in item.foods.slice(0, 3)" :key="_index">
                            <img :src="assetsUrl + food.dishesImgUrl" alt="">
                            <div class="foodName">{{ food.name }}</div>
                        </div>
                    </div>
                    <div class="total">
                        <div class="coast">￥{{ item.priceTotal }}</div>
                        <div class="jian">共{{ item.foods.length }}件</div>
                    </div>
                </div>
                <div class="bottom">
                    <div class="pingjia" @click="handlePingjia(item)" v-if="item.evaluateState == '0'">评价</div>
                    <div class="pingjia" v-else>已评价</div>

                </div>
            </div>
        </div>
        <div class="noData" v-else>
            <img src="@/assets/img/noData.png" alt="">
            <span>暂无数据</span>
        </div>
        <van-tabbar v-model="activeIndex" @change="onChange">
            <van-tabbar-item icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item icon="search">订单</van-tabbar-item>
            <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import { orderList } from "@/api/reception"
export default {

    data() {
        return {
            assetsUrl: '',

            dishesId: '',
            activeIndex: 1,
            active: 0,
            orderList: []
        };
    },
    created() {
        this.getOrderList()
        this.assetsUrl = process.env.VUE_APP_ASSETSURL

    },
    mounted() {

    },

    methods: {
        handleTab(item) {
            console.log(item, 'item', this.orderList);
            if (item == 1) {
                this.orderList = this.orderList.filter(item => item.evaluateState == 1)
            } else {
                this.getOrderList()
            }
        },
        handleOrder(item) {
            console.log(item);
        },
        async getOrderList() {
            const res = await orderList()
            console.log(res, 's');
            this.orderList = res.data.map(item => {
                return {
                    ...item.ordersInfo,
                    name: item.ordersInfo.businessName,
                    foods: item.orderDishesList.map(food => {
                        return {
                            ...food,
                            name: food.dishName,
                            price: food.unitPrice,
                            count: food.quantity,
                        }
                    })
                }
            })
            this.orderList.forEach(item => {
                let price = 0
                item.foods.forEach(item => {
                    price += item.price * 1
                })
                item.priceTotal = price
            })
            console.log(this.orderList, 'opo');

        },

        handlePingjia(item) {
            console.log(item);
            this.$router.push({
                path: '/orderHome/evaluate',
                query: {
                    info: item
                }
            })
        },
        onChange(flag) {
            this.activeIndex = flag
            if (flag == '0') {
                this.$router.push('/orderHome/receptionHome')
            } else if (flag == '1') {
                this.$router.push('/orderHome/orderManage')
            } else if (flag == '2') {
                this.$router.push('/orderHome/myCenter')
            }
        }

    },
};
</script>

<style lang="less" scoped>
.orderContent {
    height: 100%;

    .content {
        background-color: #f5f5f5;

        .orderItem {
            display: flex;
            flex-direction: column;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
            background-color: #fff;
            margin: 10px;
            margin-bottom: 20px;

            .top {
                display: flex;
                align-items: center;
                height: 40px;

                .infos {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    flex: 1;

                    .name {
                        font-size: 16px;
                        font-weight: 600;
                    }

                    .status {
                        color: #858585;
                    }
                }

                .img {
                    height: 40px;

                    img {
                        height: 100%;
                    }
                }
            }

            .middle {
                display: flex;

                .foods {
                    display: flex;

                    .food {
                        width: 100px;
                        margin: 5px;
                        text-align: center;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }

                .total {
                    // flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    // align-items: center;
                }
            }

            .bottom {
                padding-right: 10px;

                .pingjia {
                    width: 60px;
                    height: 30px;
                    border-radius: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #fff;
                    margin-left: auto;
                    background-color: #ff6b4e;
                }
            }
        }

    }

    .noData {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }

    .editBar {
        position: fixed;
        display: flex;
        bottom: 0;
        width: 100%;
        height: 60px;
        // background-color: red;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;

        .my {
            margin-right: 28px;
        }
    }
}
</style>
